<!--
 * @Author: deliteam 462085920@qq.com
 * @Date: 2023-11-20 14:20:21
 * @Description: 
-->
<template>
    <div>
        <div class="linebreak"></div>
        <div class="article">
            <ArticleTitle title="产品" class="list" data-aos="fade-in"></ArticleTitle>
            <div class="linebreak"></div>
            <div class="list fix__col-1-3">
                <div v-for="(item, index) in listData.list" :key="index" class="list__col-1-3" data-aos="fade-up"
                    :data-aos-delay="`${index % 3 * 100}`">
                    <nuxt-link :to="{
                        name: 'products-detail',
                        query: { id: item.id, category: item.category }
                    }" class="link link-details hoverAni">
                        <div class="thumb">
                            <div class="thumb__inner">
                                <img :src="$picHander(item.pic, 'zoom_small')" alt=""
                                    class="image image--loaded image--full-height" />
                            </div>
                        </div>
                        <div class="half-linebreak"></div>
                        <div class="link-textmargin">
                            産品名稱：{{ item.name }}
                        </div>
                        <div class="link-arrow arrow-hitbox">
                            <svg class="link-arrow__right" width="24" height="24" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M11.9498 24L0 12.3515L0.903766 11.4477L11.3473 21.59V0H12.6527V21.59L23.0962 11.4477L24 12.3515L11.9498 24Z"
                                    fill="black"></path>
                            </svg>
                        </div>
                    </nuxt-link>
                    <div class="linebreak"></div>
                </div>
            </div>
            <div class="linebreak"></div>
        </div>
        <div class="linebreak"></div>
        <div class="flex flex-row justify-center">
            <nuxt-link to="/contact">
                <HoverButtons @click="showForm = true" btnText="Contact Us" />
            </nuxt-link>
        </div>
        <div class="dbl-linebreak"></div>
    </div>
</template>
  
<script setup>
const cateList = ref([]);
const listData = ref({
    list: [],
    pages: 1,
    currentPage: 1,
    perPage: 3,
    category: "",
});
const getProjectsCategorys = async () => {
    // 获取可以用分类列表
    const { data } = await useFetch("/api/product-categories", {
        baseURL: "/dev-api",
        params: {
            status: 1
        }
    });
    cateList.value = data.value.data;
    console.log('[  cateList.value  ] >', cateList.value)
    if (cateList.value.length > 0) {
        let id = cateList.value.find(item => item.name.indexOf('产品') > -1).id;
        getProjects(id)
    }
};
const getProjects = async (id) => {
    const { data } = await useFetch("/api/products", {
        baseURL: "/dev-api",
        params: {
            status: 1,
            category: id
        }
    });
    listData.value.list = data.value.data;
}
getProjectsCategorys();
const { $picHander } = useNuxtApp()
</script>